<template>
  <div class="layout-box">
    <!-- 内容左1 -->
    <!-- <div class="layout-block content-1">
        <slot name="content-1"></slot>
      </div> -->
    <!-- 内容左2 -->
    <div class="layout-block content-2">
      <slot name="content-2"></slot>
    </div>
    <div class="layout-block content-3">
      <slot name="content-3"></slot>
    </div>
    <div class="layout-block content-4">
      <slot name="content-4"></slot>
    </div>
    <div class="layout-block content-5">
      <slot name="content-5"></slot>
    </div>
    <div class="layout-block content-6">
      <slot name="content-6"></slot>
    </div>
    <div class="layout-block content-7">
      <slot name="content-7"></slot>
    </div>
    <div class="layout-block content-8">
      <slot name="content-8"></slot>
    </div>
    <div class="layout-block content-9">
      <slot name="content-9"></slot>
    </div>
  </div>
</template>
      
  <style lang="less" scoped>
.layout-box {
  display: grid;
  width: 100%;
  grid-gap: 0.2rem;
  padding: 0.2rem;
  grid-template-areas:
    // "content-1 content-1 content-1 content-1"
    "content-2 content-5 content-7 content-8"
    "content-2 content-6 content-7 content-8"
    // "content-3 content-6 content-9 content-9"
    "content-3 content-6 content-9 content-9"
    "content-4 content-6 content-9 content-9";
  box-sizing: border-box;
  grid-template-columns: 11.2rem 11.2rem 5.5rem 5.5rem;
  grid-template-rows: 4.36rem 1.32rem 2.03rem 5.3rem;
  // background-color: #122B4B;
  .layout-block {
    box-sizing: border-box;
    overflow: hidden;
    // background-color: #fff;
    // opacity: 0.5;
  }
  .content-1 {
    grid-area: content-1;
  }

  .content-2 {
    grid-area: content-2;
    // background-color: #fff;
  }
  .content-3 {
    grid-area: content-3;
    // background-color: #fff;
  }
  .content-4 {
    grid-area: content-4;
    // background-color: #fff;
  }
  .content-5 {
    grid-area: content-5;
    // background-color: #fff;
  }
  .content-6 {
    grid-area: content-6;
    // background-color: #fff;
  }
  .content-7 {
    grid-area: content-7;
    // background-color: #fff;
  }
  .content-8 {
    grid-area: content-8;
    // background-color: #fff;
  }
  .content-9 {
    grid-area: content-9;
    // background-color: #fff;
  }
  // .content-10 {
  //   grid-area: content-10;
  // }
}
</style>
      